<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="title">订单明细</view>
        </view>
        <view v-if="info">
          <view class="row">
            <view class="row_left">
              {{ info.DomesticService?.title }}
            </view>
            <view class="row_right"> {{ info.oldPrice }}元 </view>
          </view>
          <view class="row">
            <view class="row_left"> 优惠券 </view>
            <!-- <view class="row_right"> -{{ info.totalActualPrice }}元 </view> -->
            <view class="row_right">
              <text v-if="currentCoupon">-{{ info.totalActualPrice }}元</text>
              <text v-else>0元</text>
            </view>
          </view>
          <view class="row">
            <view class="row_left"> 总计 </view>
            <view class="row_right">
              {{ info.DomesticService?.totalPrice }}元
            </view>
          </view>
        </view>
        <view class="confirm">
          <view class="common_btn confirm_btn" @tap="onConfirm">确定</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed, onMounted, watch } from "vue";

const $emit = defineEmits(["update:show", "close", "confirm"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
    default: () => {
      return {
        // DomesticService: {},
      };
    },
  },
  // 当前选择的优惠券
  currentCoupon: {
    type: Object,
    default: () => {
      return null;
    },
  },
});
const $data = reactive({});
const close = () => {
  $emit("update:show", false);
};
const open = () => {};
const onConfirm = () => {
  close();
};
onMounted(() => {});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
  }
  ::v-deep .u-popup__content__close {
    z-index: 999999;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .top {
      background: #ffffff;
      position: sticky;
      top: 0;
      z-index: 9999;
    }
    .title {
      background: #ffffff;
      padding: 30rpx;
      font-size: 36rpx;
      border-bottom: 1px solid #f0f0f0;
    }

    .confirm {
      width: 100%;
      margin-top: 30rpx;
      padding: 30rpx;
      background: #ffffff;
      z-index: 9999;
      &_btn {
        width: 100%;
      }
    }
  }
  .row {
    display: flex;
    align-items: center;
    font-size: 34rpx;
    padding: 30rpx;
    // margin-bottom: 30rpx;
    color: #666666;
    &:nth-child(3) {
      border-bottom: 1px solid #f9f9f9;
    }
    &:nth-child(4) {
      color: #111111;
    }
    &_left {
      width: calc(100% - 300rpx);
      padding-right: 30rpx;
    }
    &_right {
      width: 300rpx;
      text-align: right;
    }
  }
}
</style>
